<template>
	<view class="sort-item">
		<view class="sort-main">
			<view class="sort-category-name" @click="showCategory = false; showStyle = true" :class="{active:showStyle}">品类</view>
			<view class="sort-style-name" @click="showStyle = false; showCategory = true" :class="{active:showCategory}">款式</view>
		</view>
		<!-- 品类 -->
		<view class="sort-style" v-show="showStyle">
			<view class="sort-style-item" v-for="(item,index) in styleList" :key="item.id" v-if="index<6" @click="goring(item.id)">
				<image :src="item.images_url" mode="widthFix"></image>
				<view class="">{{item.name}}</view>
			</view>
		</view>
		<!-- 款式 -->
		<view class="sort-category" v-show="showCategory">
			<view class="sort-category-item" v-for="(item,index) in sortList" :key="item.id" @click="style(item.id)">
				<image :src="item.images_url" mode="widthFix"></image>
				<view class="">{{item.name}}</view>
			</view>
		</view>
		<!-- 场景 -->
		<view class="scene">
			<view class="scene_title">场景</view>
			<view class="scene_list">
				<view class="scene_item" v-for="(item,index) in brand_list" :key="item.id"  @click="brandSort(item.id)">
					<image
						:src="item.images_url" mode="widthFix"></image>
					<view class="">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:["sortList","styleList","xpList","brand_list"],
		data(){
			return{
				showStyle: true,
				showCategory: false,
			}
		},
		methods:{
			isShow(){
				this.style_state = true
			},
			show(){
				this.category_state = true
			},
			// 品类
			goring(category_id){
				uni.navigateTo({
					url:"/pages/goods_ring/goods_ring?category_id="+category_id
				})
			},
			// 款式
			style(cate_id){
				uni.navigateTo({
					url:"/pages/goods_ring/goods_ring?cate_id="+cate_id
				})
			},
			// 场景
			brandSort(brand){
				uni.navigateTo({
					url:"/pages/goods_ring/goods_ring?brand="+brand
				})
			},
		},
		onLoad() {
			// for (var i = 0; i < this.sortList.length; i++) {
			// 	console.log(i,"i");
			// }
			// console.log(this.xpList,"xpList");
		}
	}
</script>

<style>
	.sort-main{
		margin: auto;
		background-color: white;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
	.sort-style-name,.sort-category-name{
		width: 50%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #f4f4f4;
	}
	.active{
		background-color: #da2423;
		color: white;
		border-bottom: 1px solid #da2423;
	}
	/* 款式  品类 */
	.sort-category,.sort-style{
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		padding-top: 20rpx;
		padding-bottom: 50rpx;
		background-color: white;
	}
	
	.sort-category-item,.sort-style-item{
		width: 26%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
	}
	.sort-category-item image,.sort-style-item image{
		width: 60%;
		margin-top: 20rpx;
	}
	
	/* 场景 */
	.scene{
		width: 100%;
		background-color: white;
	}
	.scene_title{
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background-color: #feb2b6;
	}
	.scene_list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		margin-top: 15px;
		padding-bottom: 40rpx;
	}
	.scene_item{
		width: 26%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 13px;
	}
	.scene_item image{
		width: 60%;
		margin-top: 20rpx;
	}
	
</style>